<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS依次延长加载动画</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        :root{
            --delay: 0;
            --bg: hsla(0,0%,74.5%,.2);
            overflow-x: hidden;
        }
        .img{
            width: 100px;
            height: 100px;
            border-radius: 8px;
            background-color: var(--bg);
        }
        .flex{
            display: flex;
            justify-content:space-between;
            align-items: center;
        }
        .flex-1{
            flex: 1
        }
        .m-l-10{
            margin-left: 10px;
        }
        .m-t-10{
            margin-top: 10px;
        }
        .block{
            height: 20px;
            border-radius: 8px;
            background-color: var(--bg);
        }
        .container{
            padding: 20px;
        }
        .list-item{
            opacity: 0;
        }
        .list-item:not(:first-child){
            margin-top: 10px;
        }
        /* 动画类 */
        .ani-right-left {
            /* animation: from-right-left .3s calc(var(--delay) * 60ms) cubic-bezier(0.52, -0.36, 0.48, 1.37) both; */
            animation: from-right-left .3s cubic-bezier(0.52, -0.36, 0.48, 1.37) both;
        }
        @keyframes from-right-left {
            from {
                transform: translate(100%, 0);
                opacity: 0;
            }
            to {
                transform: translate(0, 0);
                opacity: 1;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="list-item">
            <div class="flex">
                <div class="img"></div>
                <div class="flex-1 m-l-10">
                    <div class="block"></div>
                    <div class="block m-t-10"></div>
                    <div class="block m-t-10"></div>
                </div>
            </div>
            <div class="block m-t-10"></div>
            <div class="block m-t-10"></div>
        </div>
        <div class="list-item">
            <div class="flex">
                <div class="img"></div>
                <div class="flex-1 m-l-10">
                    <div class="block"></div>
                    <div class="block m-t-10"></div>
                    <div class="block m-t-10"></div>
                </div>
            </div>
            <div class="block m-t-10"></div>
            <div class="block m-t-10"></div>
        </div>
        <div class="list-item">
            <div class="flex">
                <div class="img"></div>
                <div class="flex-1 m-l-10">
                    <div class="block"></div>
                    <div class="block m-t-10"></div>
                    <div class="block m-t-10"></div>
                </div>
            </div>
            <div class="block m-t-10"></div>
            <div class="block m-t-10"></div>
        </div>
        <div class="list-item">
            <div class="flex">
                <div class="img"></div>
                <div class="flex-1 m-l-10">
                    <div class="block"></div>
                    <div class="block m-t-10"></div>
                    <div class="block m-t-10"></div>
                </div>
            </div>
            <div class="block m-t-10"></div>
            <div class="block m-t-10"></div>
        </div>
        <div class="list-item">
            <div class="flex">
                <div class="img"></div>
                <div class="flex-1 m-l-10">
                    <div class="block"></div>
                    <div class="block m-t-10"></div>
                    <div class="block m-t-10"></div>
                </div>
            </div>
            <div class="block m-t-10"></div>
            <div class="block m-t-10"></div>
        </div>
    </div>
    <script>
        // 第一种css方案
        // document.addEventListener('DOMContentLoaded', () => {
        //     const items = document.querySelectorAll('.item');
        //     [...items].forEach((item, i) => {
        //         item.classList.add('ani-right-left');
        //         item.style.setProperty('--delay', i);
        //     });
        // });

        // 第二种纯js方案
        // document.addEventListener('DOMContentLoaded', () => {
        //     const items = document.querySelectorAll('.item');
        //     [...items].forEach((item, i) => {
        //         item.animate([
        //             { 
        //                 transform: 'translate(100%, 0)',
        //                 opacity: 0
        //             },
        //             { 
        //                 transform: 'translate(0, 0)',
        //                 opacity: 1
        //             }
        //         ], {
        //             duration: 600,
        //             delay: `${i * 60}`,
        //             easing: 'cubic-bezier(0.52, -0.36, 0.48, 1.37)',
        //             fill: 'both'
        //         });
        //     });
        // });

        // 骨架屏加载动画
        // 交错动画
        // https://css-tricks.com/different-approaches-for-creating-a-staggered-animation/
        function staggerAni(els) {
            [...els].forEach((el, i) => {
                el.animate([
                    { transform: 'translate(100%, 0)', opacity: 0 },
                    { transform: 'translate(0, 0)', opacity: 1 }
                ], {
                    duration: 600,
                    delay: `${i * 60}`,
                    easing: 'cubic-bezier(0.52, -0.36, 0.48, 1.37)',
                    fill: 'both'
                });
            });
        } 
        staggerAni(document.querySelectorAll('.list-item'))
    </script>
</body>
</html>